<link rel="stylesheet" href="/assets/home/css/details.css">

<style>
    .like{
        color: red;
    }
</style>

<header class="mui-bar mui-bar-nav" style="position: sticky;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{$subject['title']}</h1>
</header>
<a id="cover">
    <div class="course">
        <img class="video" src="{$subject['thumbs']}">
    </div>

    <div class="playcourse" id="play">
        <img class="playimg" src="/assets/home/images/play.png" />
    </div>
</a>

<!-- ckplayer视频容器元素 -->
<div id="video" style="width:100%;"></div>

<div class="head">
    <h4>{$subject['title']}</h4>
    <div class="ins">
        <div class="price">￥ {$subject['price']}元
            <!-- <span class="gray">888元</span> -->
        </div>
        <span class="mui-icon mui-icon-star good {$like == true ? 'like' : ''}">{$subject['like_count']}</span>
    </div>
    
</div>
<div class="title">
    课程列表
</div>
<ul class="mui-table-view">
    {if condition="COUNT($ChapterList) > 0"}
        {foreach $ChapterList as $item}
            <li class="mui-table-view-cell" data-listid="{$item['id']}" onclick="play(this)">{$item['title']}</li>
        {/foreach}
    {else /}
    <li class="mui-table-view-cell">暂无章节</li>
    {/if}
</ul>
<div class="title">
    课程介绍
</div>
{$subject['content']}

<div class="title">
    用户评论
</div>
<ul class="mui-table-view">
    {if condition="$commentList"}
        {foreach $commentList as $item}
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left userimg" src="{$item['business']['avatar_cdn']}">
                    <div class="mui-media-body">
                        {$item['business']['nickname']}
                        <p class='mui-ellipsis'>{$item['comment']}</p>
                    </div>
                </a>
            </li>
        {/foreach}
    {else /}
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <div class="mui-media-body">
                    暂无评价
                </div>
            </a>
        </li>
    {/if}
</ul>
<div class="tip">
    用户须知：</br>
    1、以上视频用户开通年度会员可以免费观看</br>
    2、用户购买视频后仅供在本平台使用学习，不得在第三方平台进行传播该视频
</div>

<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action " style="padding-bottom: 10vh;">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

<script src="/assets/plugin/ckplayer/ckplayer.min.js"></script>
<script>

    $('.good').click(function(){
        $.ajax({
            type:'post',
            url:`{:url('/home/subject/subject/like')}`,
            data:{
                subid:`{$subject['id']}`
            },
            dataType:'json',
            success:function(res)
            {
                console.log(res)

                if(res.code === 0)
                {
                    mui.toast(res.msg)

                    return false
                }else{
                    mui.toast(res.msg)

                    location.reload()
                }
            }
        })
    })

    $('#play').click(function(){
        getData()
    })

    function play(that)
    {
        var listid = $(that).data('listid')
        
        getData(listid)
    }

    function getData(listid = 0)
    {
        $.ajax({
            url:`{:url('/home/subject/subject/play')}`,
            type:'post',
            data:{
                subid:`{$subject['id']}`,
                listid:listid
            },
            dataType:'json',
            success: function(res)
            {
                if(res.code === 1)
                {
                    if(!res.data.url)
                    {
                        mui.toast('暂无播放地址')

                        return false
                    }
                    $('#cover').hide()

                    // 封装视频对象
                    var videoObject = {
                        container: '#video', //视频容器的ID
                        variable: 'player', //播放函数名称
                        autoplay: true, //是否自动播放
                        webFull: false, //开启全屏
                        theatre: null, //剧场模式
                        controls: true, //控制栏
                        smallWindows: null, //是否启用小窗口模式
                        smallWindowsDrag: true, //小窗口开启时是否可以拖动
                        screenshot: true, //截图功能是否开启
                        timeScheduleAdjust: 5, //是否可调节播放进度
                        video: [ //视频地址列表形式
                            [res.data.url, 'video/mp4', '中文标清', 0],
                        ]
                    }

                    var play = new ckplayer(videoObject)
                }else{
                    if(res.data.buy == 'buy')
                    {
                        mui('#sheet1').popover('toggle')
                    }

                    mui.toast(res.msg)
                }
            }
        })
    }

    $('#buy').click(function(){
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买该课程吗？', '购买课程', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    type:'post',
                    url:`{:url('/home/subject/subject/buy')}`,
                    data:{
                        subid:`{$subject['id']}`
                    },
                    dataType:'json',
                    success:function(res)
                    {
                        if(res.code === 1)
                        {
                            mui.toast(res.msg)
                        }else{
                            mui.toast(res.msg)
                        }

                        mui('#sheet1').popover('toggle')
                        return false
                    }
                })
            } else if(e.index == 0){
                mui('#sheet1').popover('toggle')
            }
        })
    })

</script>